<template>
  <div ref="editor" style="color: #000"></div>
</template>
<script>
import E from "wangeditor";
export default {
  name: "Editor",
  props: {
    value: {
      type: String,
      default: "",
    },
    meanArray: {
      type: Array,
      default: null,
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  watch: {
    value(value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value);
      }
    },
    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  data() {
    return {
      defaultMenus: [
        "head",
        "bold",
        "fontSize",
        "lineHeight",
        "foreColor",
        "justify",
        // "fontName",
        // "italic",
        // "underline",
        // "strikeThrough",
        // "indent",
        // "backColor",
        // "link",
        // "list",
        // "quote",
        // "emoticon",
        // "image",
        // "video",
        // "table",
        // "code",
        // "splitLine",
        // "undo",
        // "redo",
      ],
      editor: "",
    };
  },
  mounted() {
    const that = this;
    that.$nextTick(function () {
      that.init();
    });
  },
  methods: {
    init() {
      const _this = this;
      // const code = _this.$store.state.uploadConfig
      _this.editor = new E(_this.$refs.editor);
      _this.editor.config.uploadImgShowBase64 = false; // 使用 base64 保存图片
      _this.editor.config.focus = false; // 取消自动聚焦
      // 配置服务器端地址 upload:上传图片地址
      _this.editor.config.uploadImgServer = "/";
      _this.editor.config.uploadFileName = "file"; // 上传参数 自定义
      // 可使用监听函数在上传图片的不同阶段做相应处理
      _this.editor.config.uploadImgHooks = {
        // before(xhr, editor, files) {
        //   // xhr.open(code.methods, code.action, true)
        //   // xhr.setRequestHeader('Authorization', code.token)
        //   // 图片上传之前触发
        //   // xhr 是 XMLHttpRequst 对象 editor 是编辑器对象 files 是选择的图片文件
        //   // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        //   // return {
        //   //     prevent: true,
        //   //     msg: '放弃上传'
        //   // }
        // },
        // success(xhr, editor, result) {
        //   // 图片上传并返回结果，图片插入成功之后触发
        //   // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象，result 是服务器端返回的结果
        // },
        // fail: function (xhr, editor, result) {
        //   // 图片上传并返回结果，但图片插入错误时触发
        //   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        // },
        // error: function (xhr, editor) {
        //   // 图片上传出错时触发
        //   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        // },
        // timeout: function (xhr, editor) {
        //   // 图片上传超时时触发
        //   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        // },
        // // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        // customInsert: function (insertImg, result, editor) {
        //   // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        //   // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
        //   // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        //   var url = result.data;
        //   insertImg(url);
        //   // result 必须是一个 JSON 格式字符串！！！否则报错
        // },
      };
      // that.editor.customConfig.customUploadImg = fun         ction (files, insert) {
      //   // 上传代码返回结果之后，将图片插入到编辑器中
      //   that.filesToBase64(files)
      // }
      _this.setMenus(); // 设置菜单
      // _this.editor.config.onchange = (html) => {
      //   _this.$emit("change", html); // 将内容同步到父组件中
      // };
      _this.editor.create(); // 创建编辑器
    },
    setMenus() {
      // 设置菜单
      if (this.meanArray) {
        this.editor.config.menus = this.meanArray;
      } else {
        this.editor.config.menus = this.defaultMenus;
      }
    },
    getHtml() {
      // 得到文本内容
      return this.editor.txt.html();
    },
    setHtml(txt) {
      // 设置富文本里面的值
      this.editor.txt.html(txt);
    },
  },
};
</script>
